<template>
  我 是 任务中心
  <el-button @click="comeBackCompany()">返回</el-button>
  <div class="container">
    <el-card
      class="card"
      shadow="always"
      :body-style="{
        display: 'flex',
        flexWrap: 'wrap',
        width: '100%',
        justifyContent: 'space-evenly',
      }"
    >
      <div
        class="card-div"
        v-for="(item, index) in items"
        :key="index"
        @click="openDialog()"
      >
        {{ item }}
      </div>
      <div style="width: 30%"></div>
      <div style="width: 30%"></div>
    </el-card>
  </div>
  <el-dialog v-model="dialogTableVisible" title="ZEP计划评估报告" width="800">
    <div>
      <el-table :data="gridData">
        <el-table-column property="name" label="姓名" width="200" />
        <el-table-column property="age" label="年龄" width="200" />
        <el-table-column property="sex" label="性别" width="200" />
        <el-table-column property="report" label="评估报告" width="200" />
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref,toRaw } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

const items = ref([
  "张X老师",
  "王老师",
  "李老师",
  "袁老师",
  "钱老师",
  "赵老师",
  "老师A",
  "老师B",
  "老师C",
  "老师D"
]);
const gridData = ref([
  {
    id: "1",
    date: "2016-05-02",
    name: "汤姆",
    age: "12",
    sex: "男",
    report: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-04",
    name: "小王",
    age: "7",
    sex: "男",
    report: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-01",
    name: "约翰",
    age: "15",
    sex: "男",
    report: "No.1518,  Jinshajiang Road, Putuo District",
  },
  {
    date: "2016-05-03",
    name: "杰瑞",
    age: "11",
    sex: "女",
    report: "No.1518,  Jinshajiang Road, Putuo District",
  },
]);

const dialogTableVisible = ref(false);
const openDialog = () => {
  dialogTableVisible.value = true;
};

// 返回
const comeBackCompany = () => {
  router.back();
}
</script>

<style  scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.card {
  display: flex; /* 使用 Flexbox 布局 */
  flex-wrap: wrap; /* 允许换行 */
  width: 100%; /* 设置宽度 */
}

.card-div {
  width: 30%;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box; /* 包含边框和内边距在内的总宽度 */
  padding: 10px; /* 添加内边距 */
  margin-bottom: 10px;
  border: 1px solid black; /* 添加边框以便于查看 */
  text-align: center; /* 文字居中 */
}
</style>